<template>
  <div class="bar-2">
    <vue-chart :options="options" />
  </div>
</template>

<script setup>
import VueChart from "@/components/VueChart.vue";
import * as echarts from "echarts";
import { ref, reactive, watchEffect, onMounted } from "vue";

// 图表数据配置
const chartData = reactive({
  xAxis: [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月",
  ], // x轴刻度值
  series: {
    plan: [100, 120, 90, 110, 95, 105, 115, 130, 100, 120, 90, 110], // 计划完成投资
    actual: [90, 100, 85, 95, 85, 95, 105, 120, 90, 110, 85, 100], // 实际完成投资
    rate: [90, 83, 94, 86, 89, 90, 91, 92, 90, 92, 94, 91], // 完成率
  },
});

// 模拟异步数据加载
onMounted(() => {
  // 这里可以替换为实际的接口调用
  chartData.xAxis = ["1月", "2月", "3月", "4月"];
  chartData.series.plan = [100, 120, 90, 110];
  chartData.series.actual = [90, 100, 85, 95];
  chartData.series.rate = [90, 83, 94, 86];
});

// 颜色配置
const colors = {
  plan: "#5470c6", // 计划完成投资颜色
  actual: "#91cc75", // 实际完成投资颜色
  rate: "#fac858", // 完成率颜色
};

// 图表基础配置
const baseOptions = {
  backgroundColor: "transparent",
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["计划完成投资", "实际完成投资", "完成率"],
    textStyle: {
      color: "#fff",
    },
    top: 10,
  },
  grid: {
    top: "15%",
    right: "5%",
    left: "10%",
    bottom: "12%",
  },
  xAxis: {
    type: "category",
    name: "（月）",
    nameLocation: "end",
    nameGap: 5,
    nameTextStyle: {
      color: "#fff",
      fontSize: 14,
      align: "right",
      verticalAlign: "top",
      padding: [5, 0, 0, 0],
    },
    axisLine: {
      lineStyle: {
        color: "#fff",
      },
    },
    axisLabel: {
      color: "#fff",
    },
  },
  yAxis: [
    {
      type: "value",
      name: "（万元）",
      nameLocation: "end",
      nameGap: 35,
      nameTextStyle: {
        color: "#fff",
        fontSize: 14,
        align: "right",
        padding: [5, 0, 0, 0],
        verticalAlign: "top",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(255,255,255,0.2)",
        },
      },
      axisLabel: {
        color: "#fff",
      },
    },
    {
      type: "value",
      name: "（%）",
      nameLocation: "end",
      nameGap: 35,
      nameTextStyle: {
        color: "#fff",
        fontSize: 14,
        align: "right",
        padding: [5, 0, 0, 0],
        verticalAlign: "top",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
      },
    },
  ],
};

/**
 * 获取柱状图配置
 * @param {string} name - 系列名称
 * @param {string} color - 柱子颜色
 * @param {number[]} data - 系列数据
 * @param {number} yAxisIndex - 使用的y轴索引
 * @returns {Object} 柱状图配置
 */
const getBarConfig = (name, color, data, yAxisIndex = 0) => ({
  name,
  type: "bar",
  yAxisIndex,
  itemStyle: {
    color,
  },
  data,
});

/**
 * 获取折线图配置
 * @param {string} name - 系列名称
 * @param {string} color - 线条颜色
 * @param {number[]} data - 系列数据
 * @returns {Object} 折线图配置
 */
const getLineConfig = (name, color, data) => ({
  name,
  type: "line",
  yAxisIndex: 1,
  symbol: "circle",
  symbolSize: 8,
  itemStyle: {
    color,
  },
  data,
});

// 图表实例配置
const options = ref({});

// 监听数据变化，更新图表配置
watchEffect(() => {
  options.value = {
    ...baseOptions,
    xAxis: {
      ...baseOptions.xAxis,
      data: chartData.xAxis,
    },
    series: [
      // 计划完成投资柱状图
      getBarConfig("计划完成投资", colors.plan, chartData.series.plan),
      // 实际完成投资柱状图
      getBarConfig("实际完成投资", colors.actual, chartData.series.actual),
      // 完成率折线图
      getLineConfig("完成率", colors.rate, chartData.series.rate),
    ],
  };
});
</script>

<style lang="scss" scoped>
.bar-2 {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
</style>
